---

AULA 09 - Classes

---

AGENDA

• Imports e exports
• Introdução a Classes
• Referências
• Perguntas

1. Imports e exports

• Para maiores esclarecimentos, consulte Souto, Mario (2021).

• Sejam os módulos javascript:

  • pessoa.js
  • util.js
  • app.js

// pessoa.js utilizado default export
const pessoa = { nome: "Ana Paula", idade: 10 };
export default pessoa;                 // exportação padrão não nomeada

// OU 
export default {
    nome: "Ana Paula",
    idade: 10,    
};

// util.js utilizado named export
export const limpar = () => { ... } ;  // exportação nomeada limpar (utilizamos const ao inves de default)
export const baseDados = 10;           // exportação nomeada baseDados (utilizamos const ao inves de default)


// app.js                            
import pessoa from './pessoa.js';   // para exportação default, pode personalizar a importação. Nesse exemplo foi utilizado pessoa.
import pes from './pessoa.js';      // para exportação default, pode personalizar a importação. Nesse exemplo foi utilizado pes.
import {baseDados} from './util.js';  // nesse caso, é obrigatório utilizar o nome atribuído na exportação.
import {limpar} from './util.js';     // nesse caso, é obrigatório utilizar o nome atribuído na exportação.

// OU
import {baseDados, limpar} from './util.js';

2. Introdução a Classes

• As classes são objetos javascripts com propriedades e métodos.

class Pessoa {
    nome = "Ana";         // um atributo da classe Pessoa (propriedade)
    call = () => { ... }. // um método da classe Pessoa
}

// utilização
const minhaPessoa = new Pessoa();
minhaPessoa.call();
console.log(minhaPessoa.nome);

2.1. Herança em javascript

• O método constructor() pode ser usado para iniciar a construção de qualquer objeto de qualquer classe.

class Humano {
    constructor() {
        this.idade = 10;
    }
    imprimirIdade() {
        console.log(this.idade);
    }
}

humano = new Humano();
humano.imprimirIdade();



class Pessoa {
    constructor() {
        this.nome = "Ana";
        this.sobrenome = "Giancoli";
    }
    imprimirNome() {
        console.log(this.nome);
    }
}

pessoa = new Pessoa();
pessoa.imprimirNome();

• Modificando a classe Pessoa para usarmos herança

class Pessoa extends Humano{
    constructor() {
        super();   // método que indica que herdará do pai
        this.nome = "Ana";
        this.sobrenome = "Giancoli";
    }
    imprimirNome() {
        console.log(this.nome);
    }
}

pessoa = new Pessoa();
pessoa.imprimirNome();
pessoa.imprimirIdade();

2.2. Utilizando Arrow functions

class Humano {
    constructor() {
        this.idade = 10;
    }
    imprimirIdade = () => {
        console.log(this.idade);
    }
}

humano = new Humano();
humano.imprimirIdade();



class Pessoa extends Humano {
    constructor() {
        super();   // método que indica que herdará do pai
        this.nome = "Ana";
        this.sobrenome = "Giancoli";
    }
    imprimirNome = () => {
        console.log(this.nome);
    }
}

pessoa = new Pessoa();
pessoa.imprimirNome();
pessoa.imprimirIdade();

---

Referências

• Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.

---

---

ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.

</div> </div>